<template>
  <UserBasicForm ref="userBasicForm" v-loading="formLoading" :form-value="userBasicDetailFormValue" :isUnEditable="true"/>
  <div class="fixed-button-container">
    <el-button type="primary" class="fixed-button" @click="goBack">返回</el-button>
    <el-button type="warning" class="fixed-button" @click="goNext">下一步</el-button>
  </div>
</template>


<script setup>
import UserBasicForm from './UserBasicForm.vue'
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import UserBasic from "@/api/UserBasic.js";

const route = useRoute()
const router = useRouter()
const userBasicDetailFormValue = ref({"userAttendanceInfo":{}, "userEducationVOList":[], "userFamilyMemberVOList":[]});
const formLoading = ref(false);

const userId = ref();

onMounted(() => {
  userId.value = route.query.userId
  const body = ref({
    id: route.query.userId,
  })
  getUserBasicDetail(body.value)
});

const getUserBasicDetail = (data) => {
  formLoading.value = true

  UserBasic.getUserBasicDetail(data)
      .then(res => {
        userBasicDetailFormValue.value = res.data
        if (!res.data.userEducationVOList) {
          userBasicDetailFormValue.value.userEducationVOList=[]
        }
        if (!res.data.userFamilyMemberVOList) {
          userBasicDetailFormValue.value.userFamilyMemberVOList=[]
        }
        formLoading.value = false
      })
      .catch(error => {
        formLoading.value = false
      })
};

const goBack = () => {
  // router.push('/salaryList')
  router.back()
}

const goNext = () => {
  const id = userId.value
  router.push({ name: 'userBasicStartSalaryTwo', query: { userId:id } });
}

</script>

<style scoped>
.fixed-button-container {
  position: fixed;
  bottom: 50px; /* 距离底部的距离 */
  left: 50%; /* 水平居中定位 */
  transform: translateX(-50%); /* 偏移量，实现水平居中 */
  display: flex;
  justify-content: center; /* 水平居中按钮 */
  align-items: center; /* 垂直居中（如果需要的话） */
  z-index: 10;
}

.fixed-button {
  margin: 0 10px; /* 按钮之间的间距 */
  padding: 10px 20px; /* 按钮的内边距 */
}
</style>